<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" integrity="sha256-UXesixbeLkB/UYxVTzuj/gg3+LMzgwAmg3zD+C4ZASQ=" crossorigin="anonymous">
    <style>
      .container {padding-top: 7.5rem; padding-bottom: 7.5rem}
      .description {padding-top: 2rem;}
      input {color: #fff}
      body {font-size: 16px;background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/62126822_p0.webp) center center/cover no-repeat fixed; color: #fff; /* NO TATSUKI, NO KEMONO FRIENDS. */}
    </style>
    <title>CALCALCALC</title>
  </head>
  <body>
    <main class="ui main">
      <section class="ui container" id="forms">
        <h1>CALCALCALC</h1>
        <form action="/calculate" method="post" class="ui form">
          <div class="field">
            <div class="ui input">
              <input id="" name="expression" required placeholder="1+1" autocomplete="off" />
            </div>
          </div>
          <div class="field">
            <button class="ui primary button">
              Calculate
            </button>
          </div>
        </form>
        <div class="ui message">
          <p>Input a expression...</p>
        </div>
        <div class="ui description">
          <p>We implemented a new-generation calculator here!</p>
          <p>With the guidance of Cyber Mimic Defense, we developed this absolutely safe calculator and nobody can break it. The expression will be calculated by three different backends to make sure that the result is absolutely correct.</p>
          <p><a href="/source.7z" target="_blank">You can check the source code here. </a></p>
        </div>
      </section>
    </main>
    <script>
      document.querySelector('button').addEventListener('click', e => {
        const uiMessage = document.querySelector('.ui.message')
        uiMessage.innerHTML = 'Pending'
        e.preventDefault()
        fetch('/calculate', {
          method: 'POST',
          body: `expression=${encodeURIComponent(document.querySelector('[name="expression"]').value)}`,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(a => a.text()).then(data => {
          try {
            const json = JSON.parse(data)
            if (json.ret) {
              uiMessage.innerHTML = json.ret
            } else {
              uiMessage.innerHTML = data
            }
          } catch (e) {
            uiMessage.innerHTML = data
          }
        }).catch(e => {
          uiMessage.innerHTML = e.message
        })
      })
    </script>
  </body>
</html>
